<template>
	<view>
		<view v-if="info.total>0">
			<view class="gui-flex gui-justify-content-center" style="width: 100%;">
				<view class="content gui-border-radius gui-flex" v-for="(item,index) in info.rows"
					@click="gotoDetail(item)">
					<view>
						<image :src="$uimg+'5f24106f90f30801abcc9620'" style="height: 200rpx;width: 350rpx;"
							class="gui-border-radius"></image>
					</view>
					<view style="width: 350rpx;" class="">
						<view class="gui-bold" style="margin:20rpx 30rpx;">{{item.courseName}}</view>
						<view class="gui-text gui-color-gray" style="margin:60rpx 30rpx;">{{item.progress}}%</view>
					</view>
				</view>
			</view>
			<view class="gui-flex gui-align-items-center button-box" style="">
				<view class="gui-margin-x gui-color-gray" v-if="btnNum==0">
					共{{info.total}}个课程
				</view>
				<text class="gui-margin-x" type="radio" v-if="btnNum==1">全选</text>
				<view class="gui-flex">
					<button style="" class="btn gui-color-black" @click="close" v-if="btnNum==1">取消</button>
					<button style="" class="edit gui-color-white" @click="setComment" v-if="btnNum==1">删除</button>
					<button style="" class="edit gui-color-white" @click="edit" v-if="btnNum==0">编辑</button>
				</view>

			</view>
			<view class="gui-color-gray gui-text-center gui-margin-top" style="width: 100%;margin-top: 50rpx;">已经到底了
			</view>
		</view>
		<view v-if="info.total<1">
			<view class="gui-flex gui-column gui-align-items-center"
				style="width: 100%;height:100%;text-align: center;">
				<image style="margin-top: 400rpx;width: 550rpx;"
					src="https://app.lgwisdomunion/static/img/empty-img.3712914e.png"></image>
				<text class="gui-block gui-color-gray gui-margin-top gui-text">暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnNum: 0,
				page: 1,
				pageSize: 10,
				info: {}
			}
		},
		onLoad() {
			this.getLearn()
		},
		methods: {
			edit() {
				this.btnNum = 1
			},
			close() {
				this.btnNum = 0
			},
			getLearn() {
				let data = {
					page: this.page,
					pageSize: this.pageSize
				}
				this.$lg.Get("/API-COURSE/front/courseInfo/getMyCourseLearnRecord", data, (res) => {
					console.log(res);
					this.info = res.data
					console.log("info", this.info)
				})
			},
			gotoDetail(d) {
				console.log(d)
				uni.navigateTo({
					url: "/pages/home/Active/online/courseDetail?id=" + d.id + "&courseId=" + d.courseId +
						"&isCom=" + d.isCom,
				})
			}
		}
	}
</script>

<style>
	/* *{
		margin: 0 auto;
	} */
	page {
		width: 100vw;
		height: 100vh;
		background: url("https://app.lgwisdomunion/static/img/bj_liand.469cefe0.png") 100% 100% / 100% 100%;
		/* background-repeat:no-repeat; */
	}

	.content {
		margin-top: 20rpx;
		width: 700rpx;
		height: 200rpx;
		/* opacity: 0.5; */
		background-color: aliceblue;
	}

	.button-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 100rpx;
		justify-content: space-between;
	}

	.edit {
		height: 100rpx;
		font-size: 30rpx;
		width: 160rpx;
		line-height: 100rpx;
		background-color: rgb(237, 75, 54);
		border-radius: 0;
	}

	.btn {
		height: 100rpx;
		font-size: 30rpx;
		width: 160rpx;
		line-height: 100rpx;
		/* background-color: rgb(237,75,54); */
		border-radius: 0;
	}
</style>